class layerControl {
    constructor(baselayers, overlays) {
        this._baselayers = baselayers;
        this._overlays = overlays;
    }
    switchBaselayer(layerId) {
        for (const key in this._baselayers) {
            if (Object.hasOwnProperty.call(this._baselayers, key)) {
                const element = this._baselayers[key];
                const itemLayerId = Object.hasOwnProperty.call(element, 'layer') ? element.layer : element;
                if (layerId == itemLayerId) {
                    this._map.setLayoutProperty(itemLayerId, 'visibility', 'visible');
                } else {
                    this._map.setLayoutProperty(itemLayerId, 'visibility', 'none');
                }
            }
        }
        var mapboxLayers = document.getElementsByClassName('mapbox-gl-layer');
        for (var i = 0; i < mapboxLayers.length; i++) {
            var mapboxLayer = mapboxLayers[i];
            for (let index = 0; index < mapboxLayer.children.length; index++) {
                const button = mapboxLayer.children[index];
                if (button.dataset.layer !== layerId) {
                    button.classList.remove('active');
                } else {
                    button.classList.add('active');
                }
            }
        }
    }

    switchOverlayer(layerId, isShow) {
        layerId.split(',').forEach(item => {
            if (this._map.getLayer(item)) {
                this._map.setLayoutProperty(item, 'visibility', (isShow ? 'visible' : 'none'));
            }
        });
    }

    onAdd(_map) {
        this._map = _map;
        const map = _map;
        var baseDiv = document.createElement('div');
        baseDiv.className = 'mapbox-gl-baselayer';
        for (const key in this._baselayers) {
            if (Object.hasOwnProperty.call(this._baselayers, key)) {
                const element = this._baselayers[key];
                const layerId = Object.hasOwnProperty.call(element, 'layer') ? element.layer : element;
                var checked = this._map.getLayer(layerId) && this._map.getLayoutProperty(layerId, 'visibility') != 'none';
                var buttonContainer = document.createElement('button');
                buttonContainer.type = 'button';
                buttonContainer.dataset.layer = layerId;
                if (element.className) {
                    buttonContainer.classList.add(element.className);
                }
                if (checked) {
                    buttonContainer.classList.add('active');
                }
                buttonContainer.addEventListener('click', (e) => {
                    this.switchBaselayer(e.target.dataset.layer);
                });
                var pContainer = document.createElement('p');
                pContainer.innerHTML = key;
                buttonContainer.appendChild(pContainer);
                baseDiv.appendChild(buttonContainer);
            }
        }
        var overDiv = document.createElement('div');
        overDiv.className = 'mapbox-gl-overlayer';
        for (const key in this._overlays) {
            if (Object.hasOwnProperty.call(this._overlays, key)) {
                var checked = false;
                var layerId = this._overlays[key];
                if (typeof (str) != 'string' && Object.prototype.toString.call(layerId) === '[object Array]') {
                    for (let index = 0; index < layerId.length; index++) {
                        const item = layerId[index];
                        checked = map.getLayer(item) && this._map.getLayoutProperty(item, 'visibility') != 'none';
                        if (!checked) {
                            break;
                        }
                    }
                    layerId = layerId.join(',');
                } else {
                    checked = map.getLayer(layerId) && this._map.getLayoutProperty(layerId, 'visibility') != 'none';
                }
                var checkboxContainer = document.createElement('input');
                checkboxContainer.type = 'checkbox';
                checkboxContainer.dataset.layer = layerId;
                checkboxContainer.checked = checked;
                checkboxContainer.id = 'mapbox-layer-ckb-' + key;
                checkboxContainer.name = 'overlayer';
                checkboxContainer.addEventListener('click', (e) => {
                    this.switchOverlayer(e.target.dataset.layer, e.target.checked);
                });
                var labelContainer = document.createElement('label');
                labelContainer.setAttribute('for', checkboxContainer.id);
                labelContainer.textContent = key;
                var itemBaseContainer = document.createElement('div');
                itemBaseContainer.appendChild(checkboxContainer);
                itemBaseContainer.appendChild(labelContainer);
                overDiv.appendChild(itemBaseContainer);
            }
        }
        this._container = document.createElement('div');
        this._container.style['padding'] = '2px 8px';
        this._container.style['background-color'] = 'rgba(255,255,255,0.5)';
        this._container.appendChild(baseDiv);
        this._container.appendChild(document.createElement('hr'));
        this._container.appendChild(overDiv);
        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
        return this._container;
    }
    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
    changeLayer(layer, checked) {
        document.getElementById('mapbox-layer-ckb-' + layer).checked = checked;
    }
}
// module.exports = layerControl;
export default layerControl;
// export default{
//     layerControl
// }